$mobile/booking/bookingHeader()$
$mobile/constantAssets/logoAndNavigation()$

<body>
<div id="wrapper">
<section>
    <br />
    <div class="titleContainer"><h1 class="topTitle">Make A Booking</h1></div>
    <h6 class="whiteText">Please fill out this form to make a booking. Once booked, pop in to pay the deposit (50%) and the party will be confirmed.</h6>
    <form id="bookingForm" class="pure-form pure-form-aligned">
        <fieldset>
            <legend>Personal information:</legend>

            <div class="pure-control-group">
                <label for="adultname">Your name:</label>
                <input id="adultname" type="text" name="adultname" placeholder="Your Name...">
            </div>
            <div class="clearfix"></div>
            
            <div class="pure-control-group">
                <label for="address">Address:</label>
                <textarea id="address" class="selectBoxes" type="textarea" name="address" placeholder="Address..."></textarea>
            </div>

            <div class="clearfix"></div>
            <br />
            <br />

            <div class="pure-control-group">
                <label for="postcode">Postcode:</label>
                <input id="postcode" type="text" name="postcode" placeholder="Postcode...">
            </div>

            <div class="pure-control-group">
                <label for="telephoneNumber">Tel Number:</label>
                <input id="telephoneNumber" type="tel" name="telephoneNumber" placeholder="Telephone Number...">
            </div>

            <div class="pure-control-group">
                <label for="mobileNumber">Mob Number:</label>
                <input id="mobileNumber" type="tel" name="mobileNumber" placeholder="Mobile Number...">
            </div>

            <div class="pure-control-group">
                <label for="email">Email:</label>
                <input id="email" type="text" name="email" placeholder="Email...">
            </div>
            <br>

            <legend>Child Details:</legend>
            <div class="pure-control-group">
                <label for="childname">Child's name:</label><br />
                <input id="childname" type="text" name="childname" placeholder="Child's Name...">
            </div>

            <div class="pure-control-group">
                <label for="childAge">Child Age:</label><br />
                <select id="childAge" class="selectBoxes" name="childAge">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                </select>
            </div>
            <br>

            <br/><legend>Party Information:</legend>
            <div class="pure-control-group">
                <label for="datepicker">Date:</label>
                <input id="datepicker" type="date" name="datepicker">
            </div>

            <div class="clearfix"></div>


            <div class="pure-control-group">
                <label for="timeOfParty">Party Time:</label>
                <select id="timeOfParty" class="selectBoxes" name="timeOfParty">
                    <option value="10:00am">10:00 a.m &nbsp;&nbsp;&nbsp;&nbsp;Mon - Sun</option>
                    <option value="11:00am">11:00 a.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Sun</option>
                    <option value="12:15pm">12:15 p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Sun</option>
                    <option value="1.30pm">1:30  p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Fri</option>
                    <option value="2.45pm">2:45 p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Fri</option>
                    <option value="3.45pm">3:45 p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Fri</option>
                    <option value="4.00pm">4.00 p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Fri</option>
                    <option value="4.30pm">4.30 p.m. &nbsp;&nbsp;&nbsp;&nbsp;Mon - Fri</option>
                </select>
            </div>


            <br>
            <br>
            <legend>Extras:</legend>
            <div class="pure-control-group">
                <label for="partyBags">Party Bags:</label>
                <select id="partyBags" class="selectBoxes" name="partyBags">
                    <option value="false">No thanks</option>
                    <option value="true">Yes - Additional &pound;1.50 per head</option>
                </select>
            </div>


            <div class="pure-control-group">
                <label for="jazzyRequired" class="selectBoxes">Jazzy the friendly tiger to present cake:</label>
                <select id="jazzyRequired" class="selectBoxes" name="jazzyRequired">
                    <option value="false">No thanks</option>
                    <option value="true">Yes additional &pound;10.00</option>
                </select>
            </div>

            <br>
            <legend>Adult Platters - &pound;8.00:</legend>

            <div class="pure-control-group">
                <label for="invitationLanguage">Invitation Language:</label><br />
                <select id="invitationLanguage" class="selectBoxes" name="invitationLanguage">
                    <option value="english">English</option>
                    <option value="welsh">Welsh</option>
                </select>
            </div>

            <div class="clearfix"></div>
            <br />
            <br />

            <div class="pure-control-group">
                <label for="additionalComments">Additional Comments:</label>
                <textarea id="additionalComments" class="selectBoxes" type="text" name="additionalComments" placeholder="Any Additional Comments..."></textarea>
            </div>

            <div class="clearfix"></div>

            <!--<div id="childslidervalue">10</div>-->
            <br>

            <div class="pure-controls">
                <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
        </fieldset>
    </form>
</section>
$mobile/constantAssets/footer()$
</div>
</body>

</html>
